<template>
  <div class="RowExpand">
    <p v-if="listIsEmpty">数据为空</p>
    <!-- {{ row.role_name }} -->
    <el-row v-else v-for="item1 in permissionList" :key="item1.ps_id">
      <el-col :span="4">
        <el-tag
          :closable="
            row.role_name === '超级管理员'
              ? false
              : $store.state.btn_permission.includes('141')
          "
          type="primary"
          :key="item1.ps_id"
          @close="delPermById(item1.ps_id, item1.ps_level)"
          v-has="141"
        >
          {{ item1.ps_name }}
        </el-tag>
        <i class="el-icon-caret-right"></i>
      </el-col>

      <el-col :span="20">
        <el-row v-for="item2 in item1.children" :key="item2.ps_id">
          <el-col :span="4">
            <el-tag
              :closable="
                row.role_name === '超级管理员'
                  ? false
                  : $store.state.btn_permission.includes('141')
              "
              type="success"
              :key="item2.ps_id"
              @close="delPermById(item2.ps_id, item2.ps_level)"
              v-has="141"
            >
              {{ item2.ps_name }}
            </el-tag>
            <i class="el-icon-caret-right"></i>
          </el-col>

          <el-col :span="20" class="notCenter">
            <el-tag
              :closable="
                row.role_name === '超级管理员'
                  ? false
                  : $store.state.btn_permission.includes('141')
              "
              type="warning"
              v-for="item3 in item2.children"
              :key="item3.ps_id"
              @close="delPermById(item3.ps_id, item3.ps_level)"
              v-has="141"
            >
              {{ item3.ps_name }}
            </el-tag>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getExpPermListById, delPermById } from "@/api/role";

export default {
  name: "RowExpand",
  data() {
    return {
      permissionList: [
        // {
        //   ps_id: 0,
        //   ps_name: "商品管理",
        //   children: [
        //     {
        //       ps_id: 1,
        //       ps_name: "分类1",
        //       children: [{ ps_id: 3, ps_name: "1111111" }],
        //     },
        //   ],
        // },
      ],
      keys: [],
    };
  },
  props: {
    row: {
      type: Object,
      require: true,
    },
  },

  created() {
    //获取权限列表
    this.initPermissionList();
    // console.log(this.row.role_id, this.row.role_name);
  },
  computed: {
    listIsEmpty() {
      return this.permissionList.length === 0;
    },
  },
  methods: {
    //获取权限列表
    initPermissionList() {
      getExpPermListById(this.row.ps_ids).then(
        (res) => {
          // console.log(res.data);
          if (res.data.status !== 200)
            return this.$message.error("获取权限失败");
          //==================================================调整
          if (res.data.data) this.permissionList = res.data.data;
          // console.log("aaaaa", this.permissionList);
        },
        (err) => {
          return this.$message.error("获取权限失败");
        }
      );
    },
    //递归获取剩余的keys
    getRemindKeys() {
      this.permissionList.forEach((item1) => {
        this.keys.push(item1.ps_id);
        item1.children &&
          item1.children.forEach((item2) => {
            this.keys.push(item2.ps_id);
            item2.children &&
              item2.children.forEach((item3) => {
                this.keys.push(item3.ps_id);
              });
          });
      });
    },
    delPermById(ps_id, ps_level) {
      this.$confirm("删除当前权限, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // console.log(this.row.role_id, this.row.role_name, ps_id, ps_level);
          // console.log(this.permissionList);
          //根据得到的ps_id从列表中删除权限(注意children一并删除)
          if (ps_level === "0") {
            //遍历permissionList 删除第一层对应的ps_id
            this.permissionList.some((item, index) => {
              if (item.ps_id === ps_id) {
                this.permissionList.splice(index, 1);
                return true;
              }
            });
            //得到所有的keys(遍历)
            this.keys = [];
            this.getRemindKeys();
          } else if (ps_level === "1") {
            ///========================更改  有可能出现删除后一级也没了
            this.permissionList.some((item1, index1) => {
              return item1.children.some((item2, index2) => {
                if (item2.ps_id === ps_id) {
                  this.permissionList[index1].children.splice(index2, 1);
                  return true;
                }
              });
            });
            //得到所有的keys(遍历)
            this.keys = [];
            this.getRemindKeys();
          } else {
            ///========================更改  有可能出现删除后二级也没了
            this.keys = [];
            this.getRemindKeys();
            //去除第三级选中的ps_id
            this.keys = this.keys.filter((item) => {
              return item !== ps_id;
            });
          }
          //处理结束
          delPermById(this.row.role_id, this.keys).then(
            (res) => {
              // console.log(res.data);
              if (res.data.status !== 200)
                return this.$message.error("删除失败");
              this.$message.success("删除成功");
              //告诉tableList刷新一下（得到新的数据库内容 不然还是旧的ps_ids 拿进来显示就是旧的）
              this.$bus.$emit("refreshRoleList");
            },
            (err) => {
              this.$message.error("删除失败");
            }
          );
        })
        .catch(() => {});
    },
  },
};
</script>

<style  scoped>
p {
  text-align: center;
  color: gray;
}
.el-row {
  display: flex;
  align-items: center;
}
.el-row:not(.el-row:last-child) {
  border-bottom: 1px solid rgb(183, 178, 178);
}
.el-col {
  text-align: center;
}
.el-col .el-row:not(.el-col .el-row:last-child) {
  border-bottom: 1px solid rgb(215, 213, 213);
}
.notCenter {
  text-align: left;
  margin-left: 20px;
}

::v-deep .el-tag {
  margin: 7px;
  font-size: 13px;
  height: 36px;
  line-height: 36px;
}
</style>
